/* * @Author: wangsh  * @Date: 2019-06-23 20:03:14  */
/** 饼图组件 */
import React from 'react';
import ReactEcharts from 'echarts-for-react';

const EchartsPie = (props) => {
  const mainData = props.mainData || ['天海湾', '鼎龙湾', '珍珠湾', '翠逸家园', '紫林湾'];
  const mainValue = props.mainValue || [
    { value: 1548, name: '天海湾' },
    { value: 510, name: '鼎龙湾' },
    { value: 338, name: '珍珠湾' },
    { value: 265, name: '翠逸家园' },
    { value: 220, name: '紫林湾' }
  ];

  const echartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    legend: {
      orient: 'vertical',
      x: 'right',
      data: mainData
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    series: [
      {
        type: 'pie',
        avoidLabelOverlap: false,
        data: mainValue
      },
      {
        type: 'pie',
        data: mainValue,
        label: {
          position: 'inside',
          formatter: '{d}%'
        }
      }
    ]
  };

  return (
    <ReactEcharts
      style={{ width: '100%', height: 'calc(60vh)' }}
      option={echartsOption}
    />
  );
};

export default EchartsPie;
